<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jis键盘</title>
    <link rel="stylesheet" href="css/jis.css">
    <script src="js/JQuery.min.js"></script>
</head>
<body>

<ul class="content installation">
    <li class=" first-line">
        <div>
            <span>esc</span>
            <span>1</span>
        </div>
    </li>
    <li class="first-line">
        <div>
            <span>F1</span>
            <span></span>
        </div>
    </li>
    <li class="first-line">
        <div>

            <span>F2</span>
            <span>2</span>
        </div>

    </li>
    <li class="first-line">
        <div>
            <span>F3</span>
            <span> 3</span>
        </div>

    </li>
    <li class="first-line">
        <div>
            <span>F3</span>
            <span> 4</span>
        </div>

    </li>
    <li class="first-line">
        <div>
            <span>F5</span>
            <span> 5</span>
        </div>

    </li>
    <li class="first-line">
        <div>
            <span>F6</span>
            <span> 6</span>
        </div>

    </li>
    <li class="first-line">
        <div>
            <span>F7</span>
            <span>2</span>
        </div>

    </li>
    <li class="first-line">
        <div>
            <span>F8</span>
            <span>1</span>
        </div>

    </li>
    <li class="first-line">
        <div>
            <span>F9</span>
            <span>3</span>
        </div>

    </li>
    <li class="first-line">
        <div>
            <span>F10</span>
            <span> 0</span>
        </div>

    </li>
    <li class="first-line">
        <div>
            <span>F11</span>
            <span>11</span>
        </div>

    </li>
    <li class="first-line">
        <div>
            <span>F12</span>
            <span> 12</span>
        </div>

    </li>
    <li class="clear-margin first-line esc">
        <div>
            <span class="icon icon-on"></span>
            <span>12</span>
        </div>
    </li>


    <li class="esc">
        <div>
            <span>1</span>
            <span>1</span>
        </div>

    </li>
    <li >
        <div>
            <span>2</span>
            <span>2</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>3</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>4</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>5</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>6</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>7</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>8</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>9</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>0</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>=</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>~</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>￥</span>
        </div>
    </li>
    <li class="clear-margin ">
        <div>
            <span>0</span>
            <span>delete</span>
        </div>

    </li>

    <li >
        <div>
            <span>2</span>
            <span>tab</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>Q</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>W</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>E</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>R</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>T</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>Y</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>U</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>I</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>O</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>P</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>、</span>
        </div>
    </li>
    <li >
        <div>
            <span>0</span>
            <span>{</span>
        </div>

    </li>
    <li class="clear-margin return">
        <div>
            <span>0</span>
            <span>return</span>
        </div>


    </li>

    <li class="enter">
        <div>
            <span>0</span>
            <span>control</span>
        </div>

    </li>
    <li >
        <div>
            <span>2</span>
            <span>A</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>S</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>D</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>F</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>G</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>H</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>J</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>K</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>L</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>+</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>*</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>}</span>
        </div>
    </li>

    <li class="shift">
        <div>
            <span>0</span>
            <span>shift</span>
        </div>

    </li>
    <li >
        <div>
            <span>2</span>
            <span>Z</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>X</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>C</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>V</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>B</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>N</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>M</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span><</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>></span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>?</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>口</span>
        </div>
    </li>
    <li class="clear-margin shift">
        <div>
            <span>0</span>
            <span>shift</span>
        </div>
    </li>

    <li >
        <div>
            <span>2</span>
            <span>caps</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>option</span>
        </div>
    </li>
    <li class="command">
        <div>
            <span>0</span>
            <span>command</span>
        </div>

    </li>
    <li class="command">
        <div>
            <span>0</span>
            <span>英数</span>
        </div>

    </li>
    <li class="space">
        <div>
            <span>0</span>
            <span>space</span>
        </div>

    </li>
    <li class="command">
        <div>
            <span>0</span>
            <span>わわ</span>
        </div>

    </li>
    <li class="command">
        <div>
            <span>0</span>
            <span>conmad</span>
        </div>

    </li>
    <li >
        <div>
            <span>2</span>
            <span>fn</span>
        </div>
    </li>
    <!--方向键-->


    <li>
        <div>
            <span>0</span>
            <span class="icon icon-left"></span>
        </div>


    </li>
    <ol class="arrow">
        <li class="arrow-up">
            <div>
                <span class="icon icon-up"></span>
                <span>0</span>
            </div>

        </li>
        <li class="arrow-down">
            <div>
                <span class="icon icon-down"></span>
                <span>0</span>
            </div>

        </li>

    </ol>

    <li class="clear-margin">
        <div>
            <span>0</span>
            <span class="icon icon-right"></span>
        </div>


    </li>

</ul>
<ul class="content material">
    <li class=" first-line">
        <div>
            <span>esc</span>
            <span>1</span>
        </div>
    </li>
    <li class="first-line">
        <div>
            <span>F1</span>
            <span></span>
        </div>
    </li>
    <li class="first-line">
        <div>

            <span>F2</span>
            <span>2</span>
        </div>

    </li>
    <li class="first-line">
        <div>
            <span>F3</span>
            <span> 3</span>
        </div>

    </li>
    <li class="first-line">
        <div>
            <span>F3</span>
            <span> 4</span>
        </div>

    </li>
    <li class="first-line">
        <div>
            <span>F5</span>
            <span> 5</span>
        </div>

    </li>
    <li class="first-line">
        <div>
            <span>F6</span>
            <span> 6</span>
        </div>

    </li>
    <li class="first-line">
        <div>
            <span>F7</span>
            <span>2</span>
        </div>

    </li>
    <li class="first-line">
        <div>
            <span>F8</span>
            <span>1</span>
        </div>

    </li>
    <li class="first-line">
        <div>
            <span>F9</span>
            <span>3</span>
        </div>

    </li>
    <li class="first-line">
        <div>
            <span>F10</span>
            <span> 0</span>
        </div>

    </li>
    <li class="first-line">
        <div>
            <span>F11</span>
            <span>11</span>
        </div>

    </li>
    <li class="first-line">
        <div>
            <span>F12</span>
            <span> 12</span>
        </div>

    </li>
    <li class="clear-margin first-line esc">
        <div>
            <span class="icon icon-on"></span>
            <span>12</span>
        </div>
    </li>


    <li class="esc">
        <div>
            <span>1</span>
            <span>1</span>
        </div>

    </li>
    <li >
        <div>
            <span>2</span>
            <span>2</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>3</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>4</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>5</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>6</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>7</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>8</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>9</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>0</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>=</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>~</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>￥</span>
        </div>
    </li>
    <li class="clear-margin ">
        <div>
            <span>0</span>
            <span>delete</span>
        </div>

    </li>

    <li >
        <div>
            <span>2</span>
            <span>tab</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>Q</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>W</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>E</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>R</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>T</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>Y</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>U</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>I</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>O</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>P</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>、</span>
        </div>
    </li>
    <li >
        <div>
            <span>0</span>
            <span>{</span>
        </div>

    </li>
    <li class="clear-margin return">
        <div>
            <span>0</span>
            <span>return</span>
        </div>


    </li>

    <li class="enter">
        <div>
            <span>0</span>
            <span>control</span>
        </div>

    </li>
    <li >
        <div>
            <span>2</span>
            <span>A</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>S</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>D</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>F</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>G</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>H</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>J</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>K</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>L</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>+</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>*</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>}</span>
        </div>
    </li>

    <li class="shift">
        <div>
            <span>0</span>
            <span>shift</span>
        </div>

    </li>
    <li >
        <div>
            <span>2</span>
            <span>Z</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>X</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>C</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>V</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>B</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>N</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>M</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span><</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>></span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>?</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>口</span>
        </div>
    </li>
    <li class="clear-margin shift">
        <div>
            <span>0</span>
            <span>shift</span>
        </div>
    </li>

    <li >
        <div>
            <span>2</span>
            <span>caps</span>
        </div>
    </li>
    <li >
        <div>
            <span>2</span>
            <span>option</span>
        </div>
    </li>
    <li class="command">
        <div>
            <span>0</span>
            <span>command</span>
        </div>

    </li>
    <li class="command">
        <div>
            <span>0</span>
            <span>英数</span>
        </div>

    </li>
    <li class="space">
        <div>
            <span>0</span>
            <span>space</span>
        </div>

    </li>
    <li class="command">
        <div>
            <span>0</span>
            <span>わわ</span>
        </div>

    </li>
    <li class="command">
        <div>
            <span>0</span>
            <span>conmad</span>
        </div>

    </li>
    <li >
        <div>
            <span>2</span>
            <span>fn</span>
        </div>
    </li>
    <!--方向键-->


    <li>
        <div>
            <span>0</span>
            <span class="icon icon-left"></span>
        </div>


    </li>
    <ol class="arrow">
        <li class="arrow-up">
            <div>
                <span class="icon icon-up"></span>
                <span>0</span>
            </div>

        </li>
        <li class="arrow-down">
            <div>
                <span class="icon icon-down"></span>
                <span>0</span>
            </div>

        </li>

    </ol>

    <li class="clear-margin">
        <div>
            <span>0</span>
            <span class="icon icon-right"></span>
        </div>


    </li>

</ul>

<script>
    window.onload=function(){
        var ali=document.getElementsByTagName('div');
        var posY =[];
        var posX=[];
        for(var i=0;i<ali.length;i++){
            posY.push(ali[i].offsetTop);
            posX.push(ali[i].offsetLeft);
        }
        for(var i=0;i<ali.length;i++){
            ali[i].style.position='absolute';
            ali[i].style.left=posX[i]+'px';
            ali[i].style.top=posY[i]+'px';
        }
    }

</script>
<script>

    $(function(){
        $('.installation li').click(function(){
            $(this).toggleClass('chosen');
        });
        $('.installation div').addClass('empty');
        $('.material div').click(function(){
            var thisIndex= $('.material div').index(this);
            $(this).addClass('start');
            $('.installation div').eq(thisIndex).addClass('back');
            setTimeout(function(){
                $('.installation div').eq(thisIndex).removeClass('back');
                $('.installation div').eq(thisIndex).css('opacity','1');
                $('.installation div').eq(thisIndex).css('z-index','100');
                setTimeout(function(){
                    $('.installation div').eq(thisIndex).css('z-index','3');
                },1000)
            },2000)
        })
    })
</script>
</body>
</html>